<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>我的订单</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style>
		#ak{width:800px;border:1px solid #E4EAEE;margin-top:-566px;
		margin-left:350px;}
		#akl>h3{font-size:15px;margin: 8px 14px;font-family: "楷体";font-size:19px;
		font-weight:bold;background-color:#F5F8FA;margin:0;padding:12px 30px;
		border-bottom:1px solid #E4EAEE;}
		#ln{margin-left:20px;}
		#ua{margin-left:80px;font-size:16px;color:#556D7F;}
		#ol{width:780px;text-align:center;margin:20px 0 0 -20px;line-height:70px;}
		#ol img{width:60px;height:50px;}
		#akl>h3>img{width:62px;height:48px;border:1px solid #EEDECE;border-radius:50%;
		padding:6px 0;background-color:#F7F4F0;}
		#akl>h3>img,h3{vertical-align: middle;}
		#nav{font-size:15px;color:#ccc;margin:0;padding:16px 0;border-bottom:1px solid #E4EAEE;}
		#nav a{margin: 8px 42px;color:#333;}
		#nav a:hover{color:#f00;}
		#bot{position:absolute;top:810px;left:200px;}
		#wl td{padding:60px;}
		#tou li{display:inline-block;font-size:14px;}
		#tou{background-color:#F5F5F5;border:1px solid #E8E8E8;padding:8px 0;margin-top:50px;}
		#sp{margin:0 153px;}
		.kg{margin-right:88px;}
		#list>li{height:auto;border-top:1px solid #E8E8E8;margin:14px 0;}
		.zhu{background-color:#F5F5F5;padding:8px 0 8px 30px;margin:0;}
		.zhu span{margin-right:80px;}
		#list img{width:90px;height:90px;}
		.p{margin:5px 0 5px 100px;font-size:14px;}
		#list .name{margin-left:10px;position:absolute;margin-top:18px;}
		#list .in{width:270px;text-align:left;display:inline-block;margin-left:-40px;}
		#list .price{margin-left:330px;position:absolute;margin-top:-60px;}
		#list .num{position:absolute;margin-top:-60px;margin-left:456px;}
		#list .cost{position:absolute;margin-top:-60px;margin-left:562px;}
		#list .sta{position:absolute;margin-top:-60px;margin-left:680px;}
		.a{height:540px;}
		#paging{float:right;margin-top:-10px;}
		#paging a{font-size:14px;height:26px;line-height:26px;}
		#noo{border:1px solid #eaeaea;width:100%;text-align:center;line-height:100px;}
		.gs{position:absolute;margin: -50px 0 0 160px;font-size:10px;}
		.gs span{line-height:18px;}
		#wd{width:500px;height:300px;margin:-480px 0 160px 450px;font-size:18px;}
		#wd>p{margin:140px 155px;}
		#wd a{text-decoration: underline;}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			if($("#un").val() != ""){
				findUser();
				findOrder(0,0);
			}
		})
		var pageIndex = 0;
		var pageCount = 0;
		function findUser(){
			$.ajax({
				"url":"allOrder",
				"type":"post",
				"data":"opr=myOrder&sta=0",
				"dataType":"json",
				"success":function(data){
					$("#akl").empty();
					for(var o in data){
						var sz = o.split("|");
						$("#akl").append("<h3><img src='images/head.png'/><span id='ln''>"+sz[0].split(":")[1]+"</span>" +
						"<span id='ua'>收货地址："+sz[1].split(":")[1]+"</span></h3>"+
						"<p id='nav'><a href='javascript:gb(0)'>全部</a>|<a href='javascript:gb(1)'>待审核</a>" +
						"|<a href='javascript:gb(2)'>审核通过</a>|<a href='javascript:gb(3)'>配货</a>|" +
						"<a href='javascript:gb(4)'>已发货</a>|<a href='javascript:gb(5)'>已收货</a></p>");
						break;
					}
					$("#nav a").eq(0).css({"color":"#f00"});
				}
			})
		}
		var status = 0;
		function gb(sta){
			status = sta;
			findOrder(status,0);
			$("#nav a").css({"color":"#000"});
			$("#nav a").eq(sta).css({"color":"#f00"});
		}
		function findOrder(sta,pi){
			pageIndex = pi;
			pageCount = -1;
			$("#kz").removeClass("a");
			$.ajax({
				"url":"allOrder",
				"type":"post",
				async:false,
				"data":"opr=myOrder&sta="+sta,    //+"&pageIndex="+pageIndex,
				"dataType":"json",
				"success":function(data){
					$("#list").empty();
					var str = "";
					var num = 0;
					for(var o in data){
						if(pageIndex == num){
							var sz = o.split("|");
							str += "<li><p class='zhu'><span>用户名："+sz[0].split(":")[1]+"</span><span>订单号："+sz[2].split(":")[1]+"</span>"+
		    					"<span>地址："+sz[1].split(":")[1]+"</span></p>";
							for(i=0;i<data[o].length;i++){
								str += "<p class='p'><span class='in'><img src='images/"+data[o][i].fileName+"'/><span class='name'>"+data[o][i].name+"</span></span>" +
										"<p class='gs'>";
								if(data[o][i].specification!=undefined && data[o][i].specification!=""){
									str += "<span>规格："+data[o][i].specification+"</span>";
								}
								if(data[o][i].specification!=undefined && data[o][i].specification!="" && data[o][i].color!=undefined && data[o][i].color!=""){
									str += "<br/>";
								}
								if(data[o][i].color!=undefined && data[o][i].color!=""){
									str += "<span>颜色："+data[o][i].color+"</span>";
								}
								str += "</p><span class='price'>￥"+data[o][i].price+"</span>"+
									"<span class='num'>"+data[o][i].quantity+"</span><span class='cost'>￥"+data[o][i].cost+"</span><span class='sta'>"+data[o][i].status+"</span></p>";
							}
							str += "</li>";
						}
						num++;
						pageCount++;
					}
					if(num == 0){
						$("#list").append("<table id='noo'><tr><td>没有相关的订单</td></tr></table>");
					}
					$("#list").append(str);
				}
			});
			paging();
			tq();
		}
		function tq(){
			if($("#bt").offset().top<780){
				$("#kz").addClass("a");
			}
		}
		function paging(){
			$("#paging").empty();
			if(pageCount == -1){
				
			} else { 
				$("#paging").append("<a href='javascript:findOrder("+status+",0)' class='p_pre'>首页</a>");
				if (pageIndex == 0 && pageCount == 0){
					$("#paging").append(pageNum());
				} else if (pageIndex == 0){
					$("#paging").append(pageNum());
					$("#paging").append("<a href='javascript:findOrder("+status+",pageIndex+1)' class='p_pre'>下一页</a>");
				} else if (pageIndex == pageCount){
					$("#paging").append("<a href='javascript:findOrder("+status+",pageIndex-1)' class='p_pre'>上一页</a>");
					$("#paging").append(pageNum());
				} else {
					$("#paging").append("<a href='javascript:findOrder("+status+",pageIndex-1)' class='p_pre'>上一页</a>");
					$("#paging").append(pageNum());
					$("#paging").append("<a href='javascript:findOrder("+status+",pageIndex+1)' class='p_pre'>下一页</a>");
				}
				$("#paging").append("<a href='javascript:findOrder("+status+",pageCount)' class='p_pre'>尾页</a>");
				bs();
			}
		}
		function pageNum(){
			var str = "";
			if(pageCount < 6){
				for(i=0;i<=pageCount;i++){
					str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
				}
			} else {
				for(i=0;i<=pageCount;i++){
					if(pageIndex == 1){
						if(i>3 && i< pageCount-1){
							continue;
						}
						if(i == pageCount-1){
							str += "...";
						}
						str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
					} else if (pageIndex <= pageCount - 3) {
						if(pageIndex >= (i-1) && pageIndex<=(i+1)){
							str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
						}
						if(i == pageCount -1){
							str += "...";
						}
						if(i >= pageCount-1){
							str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
						}
					} else if (pageIndex == pageCount - 2){
						if(i > pageIndex-3 && i <= pageIndex){
							str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
						}
						if(i == pageIndex){
							str += "...";
						}
						if(i >pageCount -2){
							str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
						}
					} else if (pageIndex >= pageCount - 3){
						if(i<=3){
							str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
						}
						if(i==3){
							str += "...";
						}
						if(i > pageCount - 2){
							str += "<a href='javascript:findOrder("+status+","+i+")'>"+(i+1)+"</a>";
						}
					}
				}
			}
			return str;
		}
		function bs(){
			$("#paging a").each(function(){
				if((Number(this.text)-1)==pageIndex){
					$(this).css({"background-color":"#FF4E00","color":"#fff"});
				}
			})
		}
	</script>
  </head>
  
  <body>
  <input type="hidden" value="${userName }" id="un"/>
    <%@ include file="topBar.jsp" %>
    <%@ include file="leftBar.jsp" %>
    <c:if test="${not empty userName }">
	    <div id="kz"> 
		    <div id="ak">
		    	<div id="akl"></div>
			    <div class="pages" id="paging">
			
				</div>
		    	<ul id="tou"><li id="sp">商品</li><li class="kg">单价</li><li class="kg">数量</li><li class="kg">总价</li><li>状态</li></ul>
			   	<ul id="list">
			    	
			   	</ul>
		    </div>
		</div>
    </c:if>
    <c:if test="${empty userName }">
    	<div class="left_m" id="wd"><p>您还没有登录，请<a href="Login.jsp">登录</a></p></div>
    </c:if>
	<div id="bt">
    <%@ include file="bottomBar.jsp"%>
    </div>
  </body>
</html>
